<html>
<head>
    <title>报警列表</title>
    <link rel="stylesheet" href="../../../assets/bundle.element.css">
    <link rel="stylesheet" href="../../../style.css">

    <style>
        .level {
            padding: 5px 10px 5px 10px;
            border-radius: 10px;
            background: #575757;
            color: #fff;
        }

        .page-main {
            padding-left: 10px;
            padding-top: 10px;
        }


    </style>

</head>
<body>
<div class="page" id="page-alarmList" v-cloak>

    <div class="page-title">报警分析</div>
    <div class="page-main">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item label="时间">
                        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="query.beginTime" placeholder="起始"
                                        style="width: 150px;"></el-date-picker>
                        -
                        <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="query.endTime" placeholder="截止"
                                        style="width: 150px;"></el-date-picker>
                    </el-form-item>

                    <!--<el-form-item label="类型">-->
                    <!--<el-select placeholder="告警类型" v-model="query.type" style="width: 100px;">-->
                    <!--<el-option label="全部" value="-1"></el-option>-->
                    <!--<el-option v-for="item in types" :label="item.name" :value="item.value"></el-option>-->
                    <!--</el-select>-->
                    <!--</el-form-item>-->

                    <el-form-item label="处理状态">
                        <el-select placeholder="处理状态" v-model="query.status" style="width: 100px;">
                            <el-option label="全部" value="-1"></el-option>
                            <el-option v-for="item in statuss" :label="item.name" :value="item.value"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button type="primary" @click="search">查询</el-button>
                    </el-form-item>

                    <!--
                    <el-form-item>
                        <el-select placeholder="批量操作" v-model="bathValue" v-on:change="batch" style="width: 150px;">
                            <el-option label="×批量删除" value="1"></el-option>
                            <el-option label="√批量完成" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                    -->

                </el-form>
            </el-col>
        </el-row>

        <el-row>
            <el-col :span="24">
                <el-table :data="items" :stripe="true" :border="true" size="mini" style="width: 100%"
                          @selection-change="onCheckbox">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                    <el-table-column prop="ProjectName" label="企业名称"></el-table-column>
                    <el-table-column prop="DevName" label="设备名称"></el-table-column>
                    <el-table-column prop="manager" label="联系人"></el-table-column>
                    <el-table-column prop="phone" label="电话"></el-table-column>
                    <el-table-column prop="ErrorName" label="告警描述"></el-table-column>
                    <!--<el-table-column prop="errorType_Text" label="告警类型"></el-table-column>-->
                    <el-table-column prop="Value" label="报警值"></el-table-column>
                    <el-table-column prop="errorGrade" label="告警级别">
                        <template slot-scope="scope">
                            <template v-if="scope.row.errorGrade==1">
                                <el-tag type="danger">报警</el-tag>
                            </template>
                            <template v-if="scope.row.errorGrade==0">
                                <el-tag type="warning">故障</el-tag>
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column prop="LogTime" label="发生时间" width="150"></el-table-column>

                    <el-table-column prop="ProcessFlag_Text" label="当前状态">
                        <template slot-scope="scope">
                            <span class="level">{{scope.row.ProcessFlag_Text}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="130px" fixed="right" align="center">
                        <template slot-scope="scope">
                            <el-button size="mini" round icon="el-icon-mobile-phone"
                                       v-on:click="dispatch(scope.$index,scope.row)">
                            </el-button>
                            <el-button size="mini" round icon="el-icon-search"
                                       @click="showDetail(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>

    <div class="page-footer">
        <el-pagination background layout="prev, pager, next" :pagesize="pageSize" :total="totalCount"
                       :current-page.sync="currentPage" @current-change="onChangePage">
        </el-pagination>
    </div>

    <!--编辑弹窗-->
    <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="600">
        <el-card>
            <el-form :inline="true" label-width="100px">


                <el-form-item label="接收人(*)">
                    <el-select v-model="dptchForm.toUserId">
                        <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="报警详情(*)">
                        <el-input type="textarea" style="width:350px;" v-model="dptchForm.alarmMsg"></el-input>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>

    <el-dialog title="报警明细" :visible.sync="detailAlarmVisible" width="600">
        <el-card>
            <el-form ref="detailForm" :model="detailForm">
                <el-form-item label="可能造成的损害">
                    <el-input type="textarea" v-model="detailForm.errorDamage" autosize></el-input>
                </el-form-item>
                <el-form-item label="可能形成的原因">
                    <el-input type="textarea" v-model="detailForm.errorReason" autosize></el-input>
                </el-form-item>
                <el-form-item label="处理建议">
                    <el-input type="textarea" v-model="detailForm.errorProcess" autosize></el-input>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>

</div>
<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
<script>

    var vuePage = new Vue({
        el: '#page-alarmList',
        data: {
            query: {
                beginTime: '',
                endTime: '',
                status: '',
                type: '',
            },

            dptchForm: {
                alarmId: '',
                alarmName: '',
                alarmMsg: '',
                toUserId: ''
            },

            items: [],
            selectIdArr: [],
            editAlarmVisible: false,
            bathValue: '',
            currentPage: 1,
            totalCount: 50,
            pageSize: 10,
            types: [],
            statuss: [],
            childUsers: [],
            detailAlarmVisible: false,
            detailForm: {},
        },
        methods: {
            search: function () {
                this.currentPage = 1;
                this.loadDatas();
            },

            remove: function (index, row) {
                this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {


                    this.$message({
                        message: '删除成功！',
                        type: 'success'
                    });
                });
            },
            showDetail(row) {
                this.detailAlarmVisible = true;
                this.detailForm = {
                    errorDamage: row.errorDamage,
                    errorReason: row.errorReason,
                    errorProcess: row.errorProcess,
                }
            },
            dispatch: function (index, row) {
                if (row.ProcessFlag != 0) {
                    this.$message.warning('已经派单，请勿重复派单');
                    return;
                }
                this.dptchForm.alarmId = row.Id;
                this.dptchForm.alarmName = row.ErrorName;
                this.dptchForm.alarmMsg = row.ErrorName;
                this.dptchForm.wf_tasktime = row.LogTime;
                this.dptchForm.wf_projectNo = row.ProjectNo;
                this.editAlarmVisible = true;
            },
            batch: function (val) {
                alert(val);
            },
            onCheckbox(val) {
                this.selectIdArr = val.map(v => {
                    return v.id
                });
            },
            onChangePage(page) {
                this.currentPage = page;
                this.loadDatas();
            },
            onSaveDptch: function () {
                var _self = this;
                var param = {
                    wf_operation: "手工开单",
                    wf_businesstype: 5,
                    wf_eventName: this.dptchForm.alarmName,
                    wf_eventMsg: this.dptchForm.alarmMsg,
                    wf_objType: 5,
                    wf_objid: this.dptchForm.alarmId,
                    wf_to: this.dptchForm.toUserId,  //接收人Id
                    wf_seqno: 0,
                    wf_projectNo: this.dptchForm.wf_projectNo,
                    wf_tasktime: this.dptchForm.wf_tasktime,
                };
                HttpUtil.get('WorkFlow/Add', param).success(function (data) {
                    console.log('alarmDispatch', data);
                    if (data.state == 0) {
                        _self.$message({
                            message: '派单成功！',
                            type: 'success'
                        });

                        for (var i = 0; i < _self.items.length; i++) {
                            if (_self.items[i].Id == _self.dptchForm.alarmId) {
                                _self.items[i].ProcessFlag = 1;
                                _self.items[i].ProcessFlag_Text = '已派单';
                                break;
                            }
                        }

                        _self.editAlarmVisible = false;

                    } else {
                        _self.$message({
                            message: '派单失败！',
                            type: 'error'
                        });
                    }
                });
            },
            loadDatas: function () {
                var _self = this;
                HttpUtil.get('Error/List', {
                    errorType: this.query.type,
                    ProcessFlag: this.query.status,
                    pageno: this.currentPage,
                    pagesize: this.pageSize,
                    beginTime: this.query.beginTime,
                    endTime: this.query.endTime,
                })
                    .success((data) => {
                        console.log('getAlarms', data);
                        var datas = data.data;
                        for (var i = 0; i < datas.length; i++) {
                            for (var j = 0; j < _self.types.length; j++) {
                                if (datas[i].errorType == _self.types[j].value) {
                                    datas[i].errorType_Text = _self.types[j].name;
                                    break;
                                }
                            }

                            for (var j = 0; j < _self.statuss.length; j++) {
                                if (datas[i].ProcessFlag == _self.statuss[j].value) {
                                    datas[i].ProcessFlag_Text = _self.statuss[j].name;
                                    break;
                                }
                            }
                            datas[i].LogTime = datas[i].LogTime.replace("T", " ");
                        }

                        _self.items = datas;
                        _self.totalCount = data.total;

                    });
            }
        },
        created: function () {
            $('.page').show();
            var _self = this;
            // this.query.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
            // this.query.endTime = this.query.beginTime;

            // DeviceData.getAlarmTypes().success(function(data){
            //     _self.types = data;
            // });
            _self.types = [
                {name: '报警', value: 0},
                {name: '故障', value: 1},
                {name: '系统', value: 2}
            ],
                // DeviceData.getAlarmStatuss().success(function(data){
                //     _self.statuss = data;
                // });
                _self.statuss = [
                    {name: '未派单', value: 0},
                    {name: '已派单', value: 1},
                    // {name:'已确认',value:2},
                    {name: '已处理', value: 2}
                ];
            HttpUtil.get('User/Child').success(function (data) {
                console.log('getChildUsers', data);
                _self.childUsers = data.data;
            });
            this.loadDatas();
        },
        mounted: function () {
        }
    });

</script>
</body>
</html>
